@use '@material/theme/theme-color' as mdc-theme-color;
@use '@material/theme/theme' as mdc-theme;
@use '@material/menu-surface' as mdc-menu-surface;
@use '@material/list' as mdc-list;
@use '@material/typography' as mdc-typography;
@use '@material/ripple' as mdc-ripple;
@use '../mdc-helpers/mdc-helpers';
@use '../../material/core/theming/theming';

@mixin color($config-or-theme) {
  $config: theming.get-color-config($config-or-theme);
  @include mdc-helpers.mat-using-mdc-theme($config) {
    @include mdc-menu-surface.core-styles(mdc-helpers.$mat-theme-styles-query);
    @include mdc-list.deprecated-without-ripple(mdc-helpers.$mat-theme-styles-query);

    // MDC doesn't appear to have disabled styling for menu
    // items so we have to grey them out ourselves.
    .mat-mdc-menu-item[disabled] {
      &,
      &::after,
      .mat-icon-no-color {
        @include mdc-theme.prop(color, text-disabled-on-background);
      }
    }

    // Since we're creating `mat-icon` and the submenu trigger
    // chevron ourselves, we have to handle the color as well.
    .mat-mdc-menu-item .mat-icon-no-color,
    .mat-mdc-menu-item-submenu-trigger::after {
      @include mdc-theme.prop(color, text-icon-on-background);
    }

    // MDC's hover and focus styles are tied to their ripples which we aren't using.
    .mat-mdc-menu-item:hover,
    .mat-mdc-menu-item.cdk-program-focused,
    .mat-mdc-menu-item.cdk-keyboard-focused,
    .mat-mdc-menu-item-highlighted {
      &:not([disabled]) {
        $color: mdc-theme-color.$on-surface;
        background: rgba($color, mdc-ripple.states-opacity($color, hover));
      }
    }
  }
}

@mixin typography($config-or-theme) {
  $config: theming.get-typography-config($config-or-theme);
  @include mdc-helpers.mat-using-mdc-typography($config) {
    @include mdc-menu-surface.core-styles(mdc-helpers.$mat-typography-styles-query);

    .mat-mdc-menu-content {
      // Note that we include this private mixin, because the public
      // one adds a bunch of styles that we aren't using for the menu.
      @include mdc-list.deprecated-base_(mdc-helpers.$mat-typography-styles-query);

      // MDC uses the `subtitle1` level for list items, but the spec shows `body1` as the correct
      // level.
      .mat-mdc-menu-item {
        @include mdc-typography.typography(body1, $query: mdc-helpers.$mat-typography-styles-query);
      }
    }
  }
}

@mixin density($config-or-theme) {}

@mixin theme($theme-or-color-config) {
  $theme: theming.private-legacy-get-theme($theme-or-color-config);
  @include theming.private-check-duplicate-theme-styles($theme, 'mat-mdc-menu') {
    $color: theming.get-color-config($theme);
    $density: theming.get-density-config($theme);
    $typography: theming.get-typography-config($theme);

    @if $color != null {
      @include color($color);
    }
    @if $density != null {
      @include density($density);
    }
    @if $typography != null {
      @include typography($typography);
    }
  }
}

